// pages/ai/posterCreation/index.js
let app = getApp()
Page({

  /**
   * 页面的初始数据
   */
  data: {
    isLoading: true,
    style: "", //风格
    keywords: "", //关键字 
    timer: null,
    imgDraw: null, //绘制图片的大对象
    sharePath: '', //生成的分享图
    IMGBASEURL: app.globalData.IMGBASEURL,
    shareImg: "", //分享图
    bgImg: "", //背景
    qrcodeImg: "", //二维码 
    fastImg: "", //快人一步
    ratio: 0, //图片比例
    posterH: 0, //海报高度
    isReady: [false, false, false, false]
  },
  // 生成海报
  drawPic() {
    // console.log(this.data.IMGBASEURL);
    // if (this.data.sharePath) { //如果已经绘制过了本地保存有图片不需要重新绘制
    //   return
    // }
    let imgDraw = {
      "width": "750rpx",
      "height": this.data.posterH + "rpx",
      "background": "#1A1A1A",
      "position": "relative",
      "views": [{ //背景
          "type": "image",
          "url": this.data.bgImg,
          "mode": "widthFix",
          "css": {
            "width": "750rpx",
            "height": "1322rpx",
          }
        },
        { //logo
          "type": "image",
          "mode": "auto",
          "url": "/assets/img/logo_11.png",
          "css": {
            "width": "76rpx",
            "height": "76rpx",
            "left": "32rpx",
            "top": "50rpx",
          },
        },
        { //logo 文字
          "type": "text",
          "text": "草图里",
          "css": {
            "width": "100rpx",
            "height": "80rpx",
            "left": "132rpx",
            "top": "70rpx",
            "fontSize": "28rpx",
            "color": "#fff"
          },
        },
        // 每日一图
        {
          "type": "image",
          "mode": "auto",
          "url": "/assets/img/每日一图.png",
          "css": {
            "height": "76rpx",
            "left": "510rpx",
            "top": "50rpx",
          },
        }
      ]
    }
    //1:1
    if (this.data.ratio === 1) {
      imgDraw.views.push({
        "type": "image",
        "mode": "widthFix",
        "url": this.data.shareImg,
        // "url": wx.getStorageSync('shareImg'),
        "css": {
          "width": "686rpx",
          "height": "686rpx",
          "left": "32rpx",
          "top": "160rpx",
          "borderRadius": "16rpx"
        }
      })
      if (wx.getStorageSync('shareImgList')?.keywords) {
        imgDraw.views = imgDraw.views.concat(imgDraw.views, [{ //风格
            "type": "text",
            "text": wx.getStorageSync('shareImgList').style,
            "css": {
              "width": "686rpx",
              "left": "32rpx",
              "top": "870rpx",
              "fontSize": "32rpx",
              "color": "#fff",
              "maxLines": "1"
            },
          },
          { //关键字图片
            "type": "image",
            "mode": "auto",
            "url": "/assets/img/hb-gjc@2.png",
            "css": {
              "width": "56rpx",
              "height": "132rpx",
              "left": "32rpx",
              "top": "938rpx",
            },
          },
          { //关键字文字背景
            "type": "image",
            "mode": "auto",
            "url": "/assets/img/hb-wenzi@2.png",
            "css": {
              "width": "626rpx",
              "height": "132rpx",
              "left": "95rpx",
              "top": "938rpx",
              "zIndex": "0"
            },
          },
          { //关键字文字
            "type": "text",
            "text": wx.getStorageSync('shareImgList').keywords,
            "css": {
              "width": "560rpx",
              "height": "80rpx",
              "maxLines": "2",
              "lineHeight": "40rpx",
              "left": "140rpx",
              "top": "964rpx",
              "fontSize": "28rpx",
              "color": "#C4C4C4",
            },
          },
          { //底部二维码
            "type": "image",
            "mode": "auto",
            "url": this.data.qrcodeImg,
            // "url": "https://staticimg.aiiiin.com/wxapp/caotu-code.jpg",
            "css": {
              "width": "128rpx",
              "height": "128rpx",
              "position": "absolute",
              "left": "32rpx",
              "top": "1120rpx",
            },
          },
          { //快人一步
            "type": "image",
            "mode": "auto",
            "url": this.data.fastImg,
            // "url": "https://staticimg.aiiiin.com/wxapp/fast-text.png",
            "css": {
              "width": "538rpx",
              "height": "128rpx",
              "position": "absolute",
              "left": "180rpx",
              "top": "1120rpx",
            },
          },
        ])
      } else {
        imgDraw.views = imgDraw.views.concat(imgDraw.views, [{ //底部二维码
            "type": "image",
            "mode": "auto",
            "url": this.data.qrcodeImg,
            // "url": "https://staticimg.aiiiin.com/wxapp/caotu-code.jpg",
            "css": {
              "width": "128rpx",
              "height": "128rpx",
              "position": "absolute",
              "left": "32rpx",
              "top": "900rpx",
            },
          },
          { //快人一步
            "type": "image",
            "mode": "auto",
            "url": this.data.fastImg,
            // "url": "https://staticimg.aiiiin.com/wxapp/fast-text.png",
            "css": {
              "width": "538rpx",
              "height": "128rpx",
              "position": "absolute",
              "left": "180rpx",
              "top": "900rpx",
            },
          },
        ])
      }
    }
    //16:9
    if (this.data.ratio === 16) {
      imgDraw.views.push({
        "type": "image",
        "mode": "widthFix",
        "url": this.data.shareImg,
        "css": {
          "width": "686rpx",
          "height": "386rpx",
          "left": "32rpx",
          "top": "160rpx",
          "borderRadius": "16rpx"
        }
      })
      if (wx.getStorageSync('shareImgList')?.keywords) {
        imgDraw.views = imgDraw.views.concat(imgDraw.views, [{ //风格
            "type": "text",
            "text": wx.getStorageSync('shareImgList').style,
            "css": {
              "width": "686rpx",
              "left": "32rpx",
              "top": "570rpx",
              "fontSize": "32rpx",
              "color": "#fff",
              "maxLines": "1"
            },
          },
          { //关键字图片
            "type": "image",
            "mode": "auto",
            "url": "/assets/img/hb-gjc@2.png",
            "css": {
              "width": "56rpx",
              "height": "132rpx",
              "left": "32rpx",
              "top": "638rpx",
            },
          },
          { //关键字文字背景
            "type": "image",
            "mode": "auto",
            "url": "/assets/img/hb-wenzi@2.png",
            "css": {
              "width": "626rpx",
              "height": "132rpx",
              "left": "95rpx",
              "top": "638rpx",
              "zIndex": "0"
            },
          },
          { //关键字文字
            "type": "text",
            "text": wx.getStorageSync('shareImgList').keywords,
            "css": {
              "width": "560rpx",
              "height": "80rpx",
              "maxLines": "2",
              "lineHeight": "40rpx",
              "left": "140rpx",
              "top": "664rpx",
              "fontSize": "28rpx",
              "color": "#C4C4C4",
            },
          },
          { //底部二维码
            "type": "image",
            "mode": "auto",
            "url": this.data.qrcodeImg,
            "css": {
              "width": "128rpx",
              "height": "128rpx",
              "position": "absolute",
              "left": "32rpx",
              "top": "820rpx",
            },
          },
          { //快人一步
            "type": "image",
            "mode": "auto",
            "url": this.data.fastImg,
            // "url": "/assets/img/设计快人一步.png",
            "css": {
              "width": "538rpx",
              "height": "128rpx",
              "position": "absolute",
              "left": "180rpx",
              "top": "820rpx",
            },
          },
        ])
      } else {
        imgDraw.views = imgDraw.views.concat(imgDraw.views, [{ //底部二维码
            "type": "image",
            "mode": "auto",
            "url": this.data.qrcodeImg,
            "css": {
              "width": "128rpx",
              "height": "128rpx",
              "position": "absolute",
              "left": "32rpx",
              "top": "600rpx",
            },
          },
          { //快人一步
            "type": "image",
            "mode": "auto",
            "url": this.data.fastImg,
            // "url": "/assets/img/设计快人一步.png",
            "css": {
              "width": "538rpx",
              "height": "128rpx",
              "position": "absolute",
              "left": "180rpx",
              "top": "600rpx",
            },
          },
        ])
      }
    }
    //3:4
    if (this.data.ratio === 3) {
      imgDraw.views.push({
        "type": "image",
        "mode": "widthFix",
        "url": this.data.shareImg,
        "css": {
          "width": "686rpx",
          "height": "914rpx",
          "left": "32rpx",
          "top": "160rpx",
          "borderRadius": "16rpx"
        }
      })
      if (wx.getStorageSync('shareImgList')?.keywords) {
        imgDraw.views = imgDraw.views.concat(imgDraw.views, [{ //风格
            "type": "text",
            "text": wx.getStorageSync('shareImgList').style,
            "css": {
              "width": "686rpx",
              "left": "32rpx",
              "top": "1100rpx",
              "fontSize": "32rpx",
              "color": "#fff",
              "maxLines": "1"
            },
          },
          { //关键字图片
            "type": "image",
            "mode": "auto",
            "url": "/assets/img/hb-gjc@2.png",
            "css": {
              "width": "56rpx",
              "height": "132rpx",
              "left": "32rpx",
              "top": "1168rpx",
            },
          },
          { //关键字文字背景
            "type": "image",
            "mode": "auto",
            "url": "/assets/img/hb-wenzi@2.png",
            "css": {
              "width": "626rpx",
              "height": "132rpx",
              "left": "95rpx",
              "top": "1168rpx",
              "zIndex": "0"
            },
          },
          { //关键字文字
            "type": "text",
            "text": wx.getStorageSync('shareImgList').keywords,
            "css": {
              "width": "560rpx",
              "height": "80rpx",
              "maxLines": "2",
              "lineHeight": "40rpx",
              "left": "140rpx",
              "top": "1196rpx",
              "fontSize": "28rpx",
              "color": "#C4C4C4",
            },
          },
          { //底部二维码
            "type": "image",
            "mode": "auto",
            "url": this.data.qrcodeImg,
            "css": {
              "width": "128rpx",
              "height": "128rpx",
              "position": "absolute",
              "left": "32rpx",
              "top": "1356rpx",
            },
          },
          { //快人一步
            "type": "image",
            "mode": "auto",
            "url": this.data.fastImg,
            "css": {
              "width": "538rpx",
              "height": "128rpx",
              "position": "absolute",
              "left": "180rpx",
              "top": "1356rpx",
            },
          },
        ])
      } else {
        imgDraw.views = imgDraw.views.concat(imgDraw.views, [{ //底部二维码
            "type": "image",
            "mode": "auto",
            "url": this.data.qrcodeImg,
            "css": {
              "width": "128rpx",
              "height": "128rpx",
              "position": "absolute",
              "left": "32rpx",
              "top": "1120rpx",
            },
          },
          { //快人一步
            "type": "image",
            "mode": "auto",
            "url": this.data.fastImg,
            // "url": "/assets/img/设计快人一步.png",
            "css": {
              "width": "538rpx",
              "height": "128rpx",
              "position": "absolute",
              "left": "180rpx",
              "top": "1120rpx",
            },
          },
        ])
      }
    }
    this.setData({
      imgDraw
    })
    // console.log('对象配置完成', this.data.imgDraw);
  },
  // 海报生成完成
  onImgOK(e) {
    console.log('绘图成功', e);
    if (e.detail.path) {
      this.setData({
        sharePath: e.detail.path,
        isLoading: false
      })
    }
  },
  // 绘图失败
  onImgErr(e) {
    console.log('绘图失败', e);
  },
  // 分享
  downloadImg() {
    wx.showShareImageMenu({
      path: this.data.sharePath
    })
  },
  // 获取网络图片宽高并算出比例
  getImgSize(url) {
    wx.getImageInfo({
      src: url,
      success: res => {
        //1:1
        if (res.width === res.height) {
          this.data.posterH = 1100
          this.data.ratio = 1
        }
        //16:9
        if (res.width > res.height) {
          this.data.posterH = 800
          this.data.ratio = 16
        }
        //3:4
        if (res.width < res.height) {
          this.data.posterH = 1322
          this.data.ratio = 3
        }
        this.drawPic()
      }
    })
  },

  onLoad(options) {
    wx.downloadFile({
      url: "https://staticimg.aiiiin.com/wxapp/ui-win-bg.png",
      success: (res) => {
        this.setData({
          bgImg: res.tempFilePath,
        })
        this.data.isReady[0] = true
        if (this.data.isReady.every(item => item)) {
          // console.log('背景', this.data.isReady);
          if (wx.getStorageSync('shareImgList')?.ratio) {
            this.data.ratio = wx.getStorageSync('shareImgList')?.ratio
            if (this.data.ratio === 1) this.data.posterH = 1322
            if (this.data.ratio === 3) this.data.posterH = 1560
            if (this.data.ratio === 16) this.data.posterH = 1020
            this.drawPic()
          } else {
            this.getImgSize(wx.getStorageSync('shareImg'))
          }
        }
      }
    })
    wx.downloadFile({
      url: wx.getStorageSync('shareImg'),
      success: (res) => {
        this.setData({
          shareImg: res.tempFilePath
        })
        this.data.isReady[1] = true
        if (this.data.isReady.every(item => item)) {
          // console.log('分享图', this.data.isReady)
          if (wx.getStorageSync('shareImgList')?.ratio) {
            this.data.ratio = wx.getStorageSync('shareImgList')?.ratio
            if (this.data.ratio === 1) this.data.posterH = 1322
            if (this.data.ratio === 3) this.data.posterH = 1560
            if (this.data.ratio === 16) this.data.posterH = 1100
            this.drawPic()
          } else {
            this.getImgSize(wx.getStorageSync('shareImg'))
          }
        }
      }
    })
    wx.downloadFile({
      url: "https://staticimg.aiiiin.com/wxapp/caotu-code.jpg",
      success: (res) => {
        this.setData({
          qrcodeImg: res.tempFilePath
        })
        this.data.isReady[2] = true
        if (this.data.isReady.every(item => item)) {
          // console.log('二维码', this.data.isReady)
          if (wx.getStorageSync('shareImgList')?.ratio) {
            this.data.ratio = wx.getStorageSync('shareImgList')?.ratio
            if (this.data.ratio === 1) this.data.posterH = 1322
            if (this.data.ratio === 3) this.data.posterH = 1560
            if (this.data.ratio === 16) this.data.posterH = 1100
            this.drawPic()
          } else {
            this.getImgSize(wx.getStorageSync('shareImg'))
          }
        }
      }
    })
    wx.downloadFile({
      url: "https://staticimg.aiiiin.com/wxapp/fast-text.png",
      success: (res) => {
        this.setData({
          fastImg: res.tempFilePath
        })
        this.data.isReady[3] = true
        if (this.data.isReady.every(item => item)) {
          // console.log('快人一步', this.data.isReady)
          if (wx.getStorageSync('shareImgList')?.ratio) {
            this.data.ratio = wx.getStorageSync('shareImgList')?.ratio
            if (this.data.ratio === 1) this.data.posterH = 1322
            if (this.data.ratio === 3) this.data.posterH = 1560
            if (this.data.ratio === 16) this.data.posterH = 1100
            this.drawPic()
          } else {
            this.getImgSize(wx.getStorageSync('shareImg'))
          }
        }
      }
    })
  },
  onShow() {

  },
  onReady() {
    // console.log('onReady', this.data.isReady)
    if (wx.getStorageSync('shareImg')) {
      // this.setData({
      //   bgImg: "https://staticimg.aiiiin.com/wxapp/ui-win-bg.png",
      //   qrcodeImg: "https://staticimg.aiiiin.com/wxapp/fast-text.png",
      //   qrCode: "https://staticimg.aiiiin.com/wxapp/caotu-code.jpg",
      //   shareImg: wx.getStorageSync('shareImg'),
      //   style: wx.getStorageSync('shareImgList')?.style,
      //   keywords: wx.getStorageSync('shareImgList')?.keywords,
      // })
      // 比例存在
      // if (wx.getStorageSync('shareImgList')?.ratio) {
      //   this.data.ratio = wx.getStorageSync('shareImgList')?.ratio
      //   if (this.data.ratio === 1) this.data.posterH = 1322
      //   if (this.data.ratio === 3) this.data.posterH = 1560
      //   if (this.data.ratio === 16) this.data.posterH = 1100
      //   // this.drawPic()
      // } else {
      //   this.getImgSize(wx.getStorageSync('shareImg'))
      // }
    }
  },
  onUnload() {
    wx.removeStorageSync('styleStr')
    // console.log('页面销毁');
  }
})